<template>
  <div style="background-color: black" :style="styleSizeName">
    <LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer>
  </div>
</template>
<script>
import create from "@/components/core/echart/create";
import LivePlayer from "@liveqing/liveplayer";

export default create({
  name: "Player",
  components: {
    LivePlayer,
  },
  data() {
    return {
      videoUrl: "",
    };
  },
  mounted() {
    this.start()
  },
  methods: {
    start() {
      if (this.option.deviceId !== '' && this.option.channelId !== '') {
        window
          .axios({
            url:
              "/jetlinks/media/device/" +
              this.option.deviceId +
              "/" +
              this.option.channelId +
              "/_start",
            method: "POST",
          })
          .then((res) => {
            let data = res.data.result;
            if(data.mp4){
              this.videoUrl = data.mp4
            }else if(data.flv){
              this.videoUrl = data.flv
            }else if(data.hls){
              this.videoUrl = data.hls
            }else{
              this.videoUrl = ''
            }
          });
      }
    },
  },
});
</script>
<style scoped>
.video-box {
  width: 100%;
  height: 100%;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}
.noflash {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: blue;
  z-index: 999;
}
/*.video-box >>> .vjs-poster{*/
/*  background-repeat: no-repeat;*/
/*  background-size:100% 100%;*/
/*}*/
</style>
